<template>
	<el-dialog title="多楼盘导出" :visible.sync="centerDialogVisible" width="60%" center top="20px"
		@closed="closeDetailDialog">
		<div style="overflow-y: hidden" class="flex justify-center align-start flex-no-wrap">
			<el-transfer style="text-align: left; display: inline-block" filterable v-model="checkedData"
				:titles="['楼盘列表', '导出的楼盘']" :format="transferFormat" :props="transferProps" :data="listData">
				<span slot-scope="{ option }">{{ option.area_name }} - {{ option.building_area_name }}</span>
				<div slot="right-footer" class="flex justify-center align-center flex-no-wrap" style="height: 40px;">
					<el-button size="mini" type="primary" :disabled="(checkedData || []).length == 0"
						@click="exportExcel()">导出</el-button>
				</div>
			</el-transfer>
		</div>
		<span slot="footer" class="dialog-footer">
			<el-button size="mini" @click="centerDialogVisible = false">关 闭</el-button>
		</span>
	</el-dialog>
</template>

<script>
	import {
		export_buildings,
		export_buildings_to_one
	} from '@/api/report/report'
	import common from '@/utils/common.js';
	import {
		cloneDeep
	} from 'lodash'
	export default {
		name: 'export_list',
		props: {},
		data() {
			return {
				centerDialogVisible: false,
				listData: [],
				checkedData: [],
				transferProps: {
					key: 'building_area_id',
					label: 'building_area_name'
				},
				transferFormat: {
					noChecked: '${total}',
					hasChecked: '${checked}/${total}'
				}
			}
		},
		watch: {},
		mounted() {},
		methods: {
			openThisDialog(data) {
				let list = [];
				let idSet = new Set();
				(data || []).forEach(d => {
					if (!idSet.has(parseInt(d.building_area_id))) {
						list.push({
							area_name: d.area_name,
							building_area_id: d.building_area_id,
							building_area_name: d.building_area_name
						});
						idSet.add(parseInt(d.building_area_id));
					}
				});
				this.listData = list || [];
				this.centerDialogVisible = true;
			},
			closeDetailDialog() {
				this.checkedData = [];
			},
			exportExcel() {
				const loading = common.showLoading({
					text: '生成中'
				});
				export_buildings_to_one({
					buildingAreaIds: this.checkedData
				}).then(() => {
					loading.close();
					this.$message.success('导出成功')
				}).catch(() => {
					loading.close();
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .el-transfer-panel {
		width: 400px;
	}
</style>